<template>
	<div :class="{ hidden: hidden }" class="pagination-container">
		<el-pagination :background="background" :current-page="currentPage" :layout="layout" :total="total"
			:page-size="pageSize" :page-sizes="pageSizes" v-bind="$attrs" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
</template>

<script>
	import {
		scrollTo
	} from "@/utils/scroll-to";

	export default {
		name: "Pagination",
		props: {
			total: {
				required: true,
				type: Number,
			},
			page: {
				type: Number,
				default: 1,
			},
			limit: {
				type: Number,
				default: 20,
			},
			pageSizes: {
				type: Array,
				default () {
					return [10, 15];
				},
			},
			layout: {
				type: String,
				default: "total, sizes,prev, pager, next",
			},
			background: {
				type: Boolean,
				default: true,
			},
			autoScroll: {
				type: Boolean,
				default: true,
			},
			hidden: {
				type: Boolean,
				default: false,
			},
		},
		computed: {
			currentPage: {
				get() {
					return this.page;
				},
				set(val) {
					this.$emit("update:page", val);
				},
			},
			pageSize: {
				get() {
					return this.limit;
				},
				set(val) {
					this.$emit("update:limit", val);
				},
			},
		},
		methods: {
			handleSizeChange(val) {
				this.$emit("pagination", {
					page: this.currentPage,
					limit: val,
				});
				if (this.autoScroll) {
					scrollTo(0, 800);
				}
			},
			handleCurrentChange(val) {
				this.$emit("pagination", {
					page: val,
					limit: this.pageSize,
				});
				if (this.autoScroll) {
					scrollTo(0, 800);
				}
			},
		},
	};
</script>

<style scoped>
	.pagination-container {
		padding: 16px 16px 0 16px !important;
	}

	.pagination-container.hidden {
		display: none;
	}
</style>